<template>
  <echartTitle title="近十日各种险情比例" />

  <Echarts ref="zhu" style="width: 100%;" :option="option" width="100%" height="100%" />
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from '../../../components/echarts/index.vue'
import echartTitle from '../../../components/echartTitle/index.vue';
import { total } from '@/api/swimming/plan/index'

const zhu = ref()
const pieData = reactive([
	{
		name: '裂缝',
		value: 210
	},
	{
		name: '安全帽',
		value: 163
	},
	{
		name: '火灾',
		value: 150
	},
		{
		name: '其他',
		value: 223
	},
]);

let option = reactive({
	color: ['#18F6F8', '#288CFC'],
	legend: {
		top: '10px',
		icon: 'circle',
		itemWidth: 10,
		itemHeight: 10,
		textStyle: {
			color: 'white'
		}
	},
	tooltip: {
		confine: true,
		trigger: 'item',
		formatter: '{b} : {c}',
		backgroundColor: "rgba(0,0,0,.6)",
		textStyle: {
			color: "#FFF",
		},
	},
	series: [
		{
			avoidLabelOverlap: false,
			type: 'pie', // 玫瑰图
			center: ['50%', '50%'],
			radius: ['30%', '60%'],
			label: {
				formatter: '{b}\n-------------\n{d}%\t{c}',
				fontSize: 10
			},
			itemStyle: {
				borderRadius: 10,

				borderWidth: 2
			},
			labelLine: {
				length: 5,
				length2: 5
			},
			data: pieData
		}
	]
});

const init = ((swimTotal: number, readyTotal: number) => {
	option = {
		color: ['#18F6F8', '#288CFC'],
		legend: {
			top: '10px',
			icon: 'circle',
			itemWidth: 10,
			itemHeight: 10,
			textStyle: {
				color: 'white'
			}
		},
		tooltip: {
			confine: true,
			trigger: 'item',
			formatter: '{b} : {c}',
			backgroundColor: "rgba(0,0,0,.6)",
			textStyle: {
				color: "#FFF",
			},
		},
		series: [
			{
				avoidLabelOverlap: false,
				type: 'pie',
				center: ['50%', '60%'],
				radius: ['30%', '60%'],
				label: {
					formatter: '{b}\n-------------\n{d}%\t{c}',
					fontSize: 10,
					color: 'white'
				},
				itemStyle: {
					borderRadius: 10,

					borderWidth: 2
				},
				labelLine: {
					length: 7,
					length2: 10
				},
				data: [
					{
						name: '裂缝',
						value: pieData.find(0)
					},
					{
						name: '安全帽',
						value: readyTotal
					},
					{
						name: '火灾',
						value: readyTotal
					},
					{
						name: '其他',
						value: readyTotal
					},
				]
			}
		]
	}
})

const getData = async () => {
	var res = await total();
	console.log(res.data);
	init(res.data['swimTotal'], res.data['readyTotal'])


	zhu.value.setData(option)
}

onMounted(() => [
	getData()
])
</script>
